<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-04-20 14:55:18
 * @LastEditors: wuzy
 * @LastEditTime: 2025-06-24 14:40:17
 * @FilePath: \ruoyi-ui\src\views\source\dashboard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="homepage">
    <i class="el-icon-full-screen fullscreen" @click="fullScreen()"></i>
    <div class="header">
      <img class="title" src="./title.png" />
      <!-- <div class="title-font">宏凯铝业5G智慧工厂物料看板</div> -->
      <div class="title-font">加多利铝业5G智慧工厂物料看板</div>
      <div class="now">{{ nowDate }}</div>
    </div>
    <div class="container">
      <div class="row flex-between box">
        <div class="pannel">
          <img class="label" src="./label4.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">铝棒库存</div>
          </div>
          <div class="row flex-around">
            <div
              v-for="item in info.aluminumRod"
              :key="item.id"
              class="content"
            >
              <div class="piep">
                <img src="./piep.png" />
              </div>
              <div>产品名称：{{ item.productName }}</div>
              <div>库存数量：{{ item.storeTotalQuantity }}吨</div>
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-between box">
        <div class="pannel2">
          <img class="label" src="./label5.png" />
          <div class="flex-relative">
            <img class="box-img" src="./sign.png" />
            <div class="box-info">铝粉库存</div>
          </div>
          <div class="flex-center table-box">
            <div>
              <div class="table-head row">
                <div class="lable-width1">序号</div>
                <div class="lable-width">编号</div>
                <div class="lable-width2">产品名称</div>
                <div class="lable-width4">库存量</div>
                <div class="lable-width3">单位</div>
                <div class="lable-width">库存报警</div>
                <div class="lable-width1">序号</div>
                <div class="lable-width">编号</div>
                <div class="lable-width2">产品名称</div>
                <div class="lable-width4">库存量</div>
                <div class="lable-width3">单位</div>
                <div class="lable-width">库存报警</div>
              </div>
              <div
                class="row"
                style="line-height: 23px; border: 1px solid #063b64"
              >
                <div>
                  <div
                    class="table-content"
                    :class="{
                      'table-line': index < 18,
                      'table-bg': index % 2 === 0,
                      'table-bg2': index % 2 !== 0,
                    }"
                    v-for="(item, index) in info.aluminumPowder"
                    :key="item.id"
                  >
                    <div class="row" v-if="index < 19">
                      <div
                        class="lable-width1"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ index + 1 }}
                      </div>
                      <div
                        class="lable-width"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ item.barCode }}
                      </div>
                      <div
                        class="lable-width2"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ item.productName }}
                      </div>
                      <div
                        class="lable-width4"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ Number(item.storeTotalQuantity).toFixed(2) }}
                      </div>
                      <div class="lable-width3">
                        {{ item.unit }}
                      </div>
                      <div
                        class="lable-width"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                          'green-text': item.storeTotalQuantity >= 100,
                        }"
                      >
                        {{
                          item.storeTotalQuantity >= 100
                            ? "库存正常"
                            : "库存低，请补充"
                        }}
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="table-content"
                    v-for="(item, index) in info.aluminumPowder"
                    :class="{
                      'table-line': index > 18,
                      'table-bg2': index % 2 === 0,
                      'table-bg': index % 2 !== 0,
                    }"
                    :key="item.id"
                  >
                    <div class="row" v-if="index >= 19">
                      <div
                        class="lable-width1"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ index + 1 }}
                      </div>
                      <div
                        class="lable-width"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ item.barCode }}
                      </div>
                      <div
                        class="lable-width2"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ item.productName }}
                      </div>
                      <div
                        class="lable-width4"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                        }"
                      >
                        {{ Number(item.storeTotalQuantity).toFixed(2) }}
                      </div>
                      <div class="lable-width3">
                        {{ item.unit }}
                      </div>
                      <div
                        class="lable-width"
                        :class="{
                          'red-text': item.storeTotalQuantity < 100,
                          'green-text': item.storeTotalQuantity >= 100,
                        }"
                      >
                        {{
                          item.storeTotalQuantity >= 100
                            ? "库存正常"
                            : "库存低，请补充"
                        }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { materialDashboard } from "@/api/system/device";
import {} from "@/api/article";
import { getToken } from "@/utils/auth";
import moment from "moment";
import echarts from "echarts";
// import autofit from "autofit.js";
export default {
  components: {},
  filters: {},
  data() {
    return {
      chartLine: null,
      chartBar: null,
      now: moment().format("MM月DD日"),
      info: {
        totalMoulds: "",
        qualifiedMoulds: "",
        unqualifiedMoulds: "",
        qualifiedRate: "",
        yesterdayTotalOutput: "",
        shiftOutput: [],
        totalOrders: "",
        completedOrders: "",
        uncompletedOrders: "",
        completionRate: "",
        shiftCapacityChart: [],
        totalCapacityChart: [],
      },
      tableList: [],
      nowDate: null,
      currentPage: 0,
      pageSize: 6,
      tableListArr: [],
      refreshInterval: null,
    };
  },
  created() {},
  beforeDestroy() {
    // 组件卸载时清除定时器
    if (this.refreshInterval) {
      clearInterval(this.refreshInterval);
    }
  },
  mounted() {
    this.getList();
    // 组件挂载时启动定时器
    this.refreshInterval = setInterval(() => {
      this.getList();
    }, 60000);
    setInterval(() => {
      this.nowDate = moment().format("yyyy-MM-DD HH:mm:ss");
    }, 1000);
    document.addEventListener("fullscreenchange", this.checkFullscreen);
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      let params = {
        startDate: moment().startOf("month").format("yyyy-MM-DD"),
        endDate: moment().format("yyyy-MM-DD"),
      };
      materialDashboard(params).then((res) => {
        this.info = res;
        console.log("res", this.info);
      });
    },
    checkFullscreen() {
      this.isFullscreen = !!document.fullscreenElement;
      console.log("当前全屏状态:", this.isFullscreen);
    },
    fullScreen() {
      if (!document.fullscreenElement) {
        document.documentElement
          .requestFullscreen()
          .then(() => {
            this.isFullscreen = true;
            this.$store.commit("app/TOGGLE_FULLSCREEN", true);
          })
          .catch((err) => {
            console.error("全屏错误:", err);
          });
      } else {
        document.exitFullscreen().then(() => {
          this.isFullscreen = false;
          this.$store.commit("app/TOGGLE_FULLSCREEN", false);
        });
      }
    },
  },
};
</script>
<style scoped  lang='scss'>
#homepage {
  background: rgb(0, 17, 32);
  // height: calc(100vh - 50px);
  height: 100%;
}
.header {
  position: absolute;
}
.title {
  width: 100%;
  height: 100%;
}
.label {
  width: 100%;
  position: absolute;
}
.box-info {
  position: absolute;
  top: 0;
  z-index: 9;
  color: #fff;
  margin-left: 20px;
  line-height: 36px;
}
.box-img {
  height: 32px !important;
  width: 200px !important;
}
.pannel {
  width: 100%;
  height: 230px;
  position: relative;
}
.pannel img {
  height: 230px;
}
.pannel2 {
  margin-top: 10px;
  width: 100%;
  position: relative;
}
.pannel2 img {
  height: 540px;
}
.box {
  margin: 0 10px;
}
.row {
  display: flex;
}
.flex-between {
  justify-content: space-between;
}
.container {
  position: relative;
  top: 90px;
}
.model-title {
  width: 150px;
  text-align: center;
  height: 50px;
  line-height: 50px;
}
.model-pannel {
  height: 50px;
  line-height: 50px;
  color: #fff;
  width: 100%;
}
.flex-wrap {
  flex-wrap: wrap;
}
.model-number {
  background: rgb(45, 56, 86);
  color: #71cef8;
  width: 30px;
  font-weight: bold;
  border-bottom: 2px solid #71cef8;
  text-align: center;
  margin-bottom: 6px;
  margin-right: 6px;
}
.model-sign {
  margin-right: 6px;
  font-weight: bold;
}
.model-box {
  width: 300px;
}
::v-deep.el-table {
  background-color: transparent;
  thead {
    tr {
      background-color: transparent !important;
    }
    th {
      background: rgba(50, 147, 251, 0.15) !important;
    }
  }
  tbody {
    tr {
      td {
        border-bottom: 2px solid #063b64 !important;
      }
      td:first-child {
        border-left: 2px solid #063b64;
      }
      td:last-child {
        border-right: 2px solid #063b64;
      }
      margin-bottom: 3px;
    }
    tr:first-child {
      td {
        border-top: 2px solid #063b64;
      }
    }
  }
  .el-table__header {
    background-color: #052c55;
  }
  .el-table__expand-icon--expanded {
    transform: rotate(180deg);
  }
  .el-table__expanded-cell {
    background-color: transparent;

    > div {
      margin-top: 0;
      background-color: transparent;
      padding: 0 10px;
      thead {
        background: rgba(27, 130, 183, 0.4);
        tr {
          background-color: transparent !important;
        }
        th {
          background: transparent !important;
          color: #ffffff;
          font-size: 14px;
        }
      }
      tbody {
        td {
          color: #79c2ec;
          font-size: 14px;
          padding: 0;
        }
      }
      tr {
        background: #09385d;
        &.el-table__row--striped td.el-table__cell {
          background: #0d4a72;
        }
      }
    }
  }
  /* 自定义整个滚动条 */
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important; /* 滚动条宽度 */
    border-radius: 16px !important;
  }

  /* 自定义滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #016f8e00 !important; /* 轨道颜色 */
  }

  /* 自定义滚动条的滑块（thumb） */
  ::-webkit-scrollbar-thumb {
    background: #0081ff !important; /* 滑块颜色 */
    // border-radius: 16px !important;
  }
  .el-table__body {
    tr:hover > td.el-table__cell {
      // background-color: transparent !important;
    }
    tr:hover {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
    .current-row {
      td {
        color: #fff !important;
        span {
          color: #fff !important;
        }
      }
    }
  }
  margin-top: 10px;
  &::before {
    display: none;
  }

  th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border: none;
  }
  tr {
    background: #07315a;
    &.el-table__row--striped td.el-table__cell {
      background: #052950;
    }
    &:hover > td.el-table__cell {
      background: #052950;
    }
  }

  td.el-table__cell {
    border-bottom: none;
    height: 35px;
  }
  th.el-table__cell > .cell {
    padding: 0;
  }
  .cell {
    padding: 0;
  }
  .el-table__empty-block {
    background-color: #07315a;
  }

  .el-table__body tr.hover-row > td.el-table__cell {
    background-color: #063b64;
  }
}
.table-box {
  position: relative;
  z-index: 9;
}
.now {
  color: #fff;
  position: absolute;
  right: 26px;
  bottom: 65%;
  z-index: 99;
}

.title-font {
  font-size: 36px;
  color: #ffffff;
  font-weight: bold;
  font-family: YouSheBiaoTiHei;
  line-height: 50px;
  letter-spacing: 6px;
  text-shadow: 0px 0px 10px #89b7fe;
  text-align: center;
  font-style: normal;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
}
.content {
  color: #fff;
  line-height: 28px;
  img {
    width: 100px;
    height: 100px;
  }
}
.flex-around {
  justify-content: space-around;
}
.piep {
  text-align: center;
  margin-top: 20px;
}
.table-head {
  color: #fff;
  line-height: 36px;
  background: #0b3b6d;
}
.table-content {
  color: #fff;
}
.table-line {
  border-bottom: 1px solid #063b64;
}
.lable-width {
  width: 140px;
  text-align: center;
}
.flex-center {
  display: flex;
  justify-content: center;
}
.lable-width1 {
  width: 80px;
  text-align: center;
}
.lable-width2 {
  width: 330px;
  text-align: center;
}
.lable-width3 {
  width: 60px;
  text-align: center;
}
.lable-width4 {
  width: 80px;
  text-align: center;
}
.red-text {
  color: red;
}
.green-text {
  color: green;
}
.table-bg {
  background: #07315a !important;
  color: #79c2ec;
}
.table-bg2 {
  background: #052950 !important;
  color: #79c2ec;
}
.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 999;
  color: yellow;
}
</style>
